import { RouterPath } from "@/enums/routerPath";
import { gotoPage } from "@/utils/routerUtil";
import { trendAlarm } from "@/api/modules/iot/alarm";
import { dayjs } from "element-plus";
import mittBus from "@/utils/mittBus";
import { gatewayTotalStat, productTotalStat } from "@/api/modules/stat/stat";
import { computed, ComponentInternalInstance, getCurrentInstance } from "vue";

export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		// const data = reactive({
		// 	list: [] as any,
		// 	tableList: [
		// 		{ key: RouterPath.deviceList, label: proxy?.$t("index.tablist_label.device"), value: "0", img: "icon-1" },
		// 		{ key: RouterPath.gatewayList, label: proxy?.$t("index.tablist_label.gateway"), value: "0", img: "icon-3" },
		// 		{ key: RouterPath.productList, label: proxy?.$t("index.tablist_label.product"), value: "0", img: "icon-2" },
		// 		{ key: RouterPath.alarmList, label: proxy?.$t("index.tablist_label.alarm"), value: "0", img: "icon-4" }
		// 	] as any
		// });
		const data = computed(() => {
			return {
				list: [] as any,
				tableList: [
					{ key: RouterPath.deviceList, label: proxy?.$t("index.tablist_label.device"), value: "0", img: "icon-1" },
					{ key: RouterPath.gatewayList, label: proxy?.$t("index.tablist_label.gateway"), value: "0", img: "icon-3" },
					{ key: RouterPath.productList, label: proxy?.$t("index.tablist_label.product"), value: "0", img: "icon-2" },
					{ key: RouterPath.alarmList, label: proxy?.$t("index.tablist_label.alarm"), value: "0", img: "icon-4" }
				] as any
			};
		});
		onMounted(() => {
			mittBus.on("deviceTotal", (info: any) => {
				data.value.tableList[0].value = `${info.total}`;
			});
		});
		const load = async () => {
			let res = await gatewayTotalStat();
			let total = res.result as any;
			data.value.tableList[1].value = total.offline + total.online;
			res = await productTotalStat();
			let ptList = res.result as any[];
			data.value.tableList[2].value = ptList.length;

			let alarm: any = await trendAlarm({
				timeStamp: `${dayjs().format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`
			});
			let tadayAlarm = alarm.result?.[dayjs().format("YYYY-MM-DD")];
			data.value.tableList[3].value = tadayAlarm?.total || 0;
		};
		// 点击事件
		const lckFun = (key: RouterPath) => {
			gotoPage(key, {});
		};
		expose({ load });
		return () => {
			return (
				<div class="total-data">
					{data.value.tableList.map((item: any) => {
						return h(
							<div class="item">
								<div class={`icon ${item.img}`}></div>
								<div
									class="value"
									onClick={() => {
										lckFun(item.key);
									}}
								>
									<div class="label">{item.label}</div>
									<div class="text">{item.value}</div>
								</div>
							</div>
						);
					})}
				</div>
			);
		};
	}
});
